<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../layui/dist/css/layui.css" />
    <link rel="stylesheet" href="../src/formSelects/formSelects-v4.css">
</head>
<body>

<div class="layui-form">
    <select name="city" xm-select="select1">
        <optgroup label="分组1">
            <option value="1" disabled="disabled">北京</option>
            <option value="2" selected="selected">上海</option>
        </optgroup>
        <optgroup label="分组2">
            <option value="3">广州</option>
            <option value="4" selected="selected">深圳</option>
            <option value="5">天津</option>
        </optgroup>
    </select>
<script src="../layui/dist/layui.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    //全局定义一次, 加载formSelects
    layui.config({
        base: '/layui/src/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects/formSelects-v4'
    });
    //加载模块
    layui.use(['form','jquery', 'formSelects'], function(){
        var form = layui.form
            ,formSelects = layui.formSelects;

        formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
            //id:           点击select的id
            //vals:         当前select已选中的值
            //val:          当前select点击的值
            //isAdd:        当前操作选中or取消
            //isDisabled:   当前选项是否是disabled
            //alert("选择了: " + val.name);
            //如果return false, 那么将取消本次操作
            // if(val.value == 1){
            //     return false;
            // }
        });
    });
</script>
</body>
</html>